<template>
  <div class="count">
    <h2>当前求和为：{{ sum }}</h2>
    <Select v-model:value="n" placeholder="请选择数字" style="width: 200px">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </Select>
    <Button type="primary" class="btn_action" @click="add">加</Button>
    <Button type="primary" class="btn_action" @click="minus">减</Button>
    <h3>当前求和放大2倍：{{ countStore.doubleCount }}</h3>
    <h3>当前求和放大2倍加一：{{ countStore.doublePlusOne }}</h3>
  </div>
</template>

<script lang="ts" setup name="Count">
import { ref } from "vue";
import { useCountStore } from "@/store/count";
import { storeToRefs } from "pinia";
import { Select, Button } from "ant-design-vue";

const countStore = useCountStore();
const { sum } = storeToRefs(countStore);

let n = ref(1);
function add() {
  sum.value += n.value;
  console.log("doubleCount", countStore.doubleCount);

  console.log("add", countStore.$state);
}
function minus() {
  sum.value -= n.value;
  console.log("minus", countStore);
}
</script>

<style lang="less" scoped>
.count {
  background-color: skyblue;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  .btn_action {
    margin-left: 10px;
  }
}
</style>
